<template>
	<view class="recSongWrap">
		<text class="title">推荐歌单</text>
		<scroll-view class="scroll-view_H" scroll-x="true">
				<view @tap="openSongSheetPage(item.listId)" :style="{ marginLeft: index === 0 ? '19px' : ''}" class="recommend-item" v-for="(item, index) in recommendList" :key="index">
					<view class="sheetInfo">
						<view class="playCount">
							<i class="iconfont icon-bofang1">{{item.playCount | playCountFormat}}</i>
						</view>
						<image :src="item.picUrl" mode="aspectFit"></image>
					</view>
					<text class="sheetdescription">{{ item.listName | songSheetTextFormat }}</text>
				</view>
		</scroll-view>
	</view>
</template>

<script>
	import {mapState, mapMutations} from 'vuex'
	export default {
		name:"recoSongSheet",
		props:['recommendList'],
		data() {
			return {
			};
		},
		computed:{
			...mapState(['curTapIndex', 'globalPlayList', 'curMusicInfo', 'globalPlayStatus'])
		},
		methods:{
			...mapMutations(['changeGlobalPlayList', 'changeCurMusicInfo', 'changeCurTapIndex', 'changePlayStatus', 'changeStopStatus']),
			openSongSheetPage(listId){
				uni.navigateTo({
					url: `/pages/songSheetPage/songSheetPage?listId=${listId}`
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
.recSongWrap {
	.title {
		display: block;
		margin: 5%;
		font-size: 18px;
		font-weight: 600;
	}
	.scroll-view_H {
		width: 100%;
		white-space: nowrap;
		.recommend-item {
			width: 90px;
			height: 90px;
			font-size: 13px;
			display: inline-table;
			margin-right: 18px;
			.sheetInfo {
				position: relative;
				width: 90px;
				height: 90px;
				overflow: hidden;
				display: flex;
				justify-content: center;
				align-items: center;
				margin-bottom: 3px;
				border-radius: 10px;
				.playCount {
					display: flex;
					justify-content: center;
					align-items: center;
					position: absolute;
					top: 2rpx;
					right: 6rpx;
					color: #FFFFFF;
					height: 36rpx;
					background-color: rgba(124, 113, 113, 0.68);
					border-radius: 6px;
					.iconfont {
						font-size: 26rpx;
					}
				}
				
			}
			.sheetdescription {
				width: 91px;
				display: -webkit-box;
				overflow: hidden;
				text-overflow: ellipsis;
				color: #000000;
				-webkit-line-clamp: 2;
				-webkit-box-orient: vertical;
			}
		}
	}
}

</style>
